@import "variables.scss";
.reel-box{
    .reel-l,
    .reel-r{
        width: 11.25%;height: 100%; float: left;
    }
    .reel-l{
        background: url(../images/address_reel_l.png) no-repeat;
        background-size: 100% 100%;
    }
    .reel-r{
        background: url(../images/address_reel_r.png) no-repeat;
        background-size: 100% 100%;
    }
    .reel-cont{
        width:0;height: 100%;overflow: hidden; float: left;
        background: url(../images/address_reel_cont.png) no-repeat;
        background-size: 100% 100%;
        transition: all 1.75s linear;
        display: flex;
        justify-content: center;
        .address-map{
            width: 92%;height:100%;position: relative;
            background: url(../images/address-map.png) no-repeat;
            background-size: 100% 100%;
            h3{
                font-family: "HYJINKAIJ";font-size: 30px;color: #202020;
                position: absolute;left:13%;top: 20%;
            }
            .item{
                width:32px;height: 40px;position: absolute;cursor: pointer;
                background: url(../images/icon-map.png) no-repeat;
                animation: _flash 2s linear infinite;
                .inner-txt{
                    width: 300px;position: absolute;text-align: center;
                    font-family: 'HYJINKAIJ';font-size: 20px;color: #1b1b1b;
                    left: 50%;margin-left: -150px;
                    transform: scale(0);
                    transform-origin: center bottom;
                    transition: all .275s $bezier-mazel;
                }
                &:hover{
                    animation: none;
                    .inner-txt{
                        transform: scale(1);
                    }
                }
                &.item1{
                    left: 13.97%;bottom: 30.92%;
                    .inner-txt{
                        top: -110px;
                    }
                }
                &.item2{
                    left: 32.72%;bottom: 34%;
                    .inner-txt{
                        bottom: -110px;
                        transform-origin: center top;
                    }
                }
                &.item3{
                    left: 39.25%;bottom: 51.4%;
                    .inner-txt{
                        top: -110px;
                    }
                }
                &.item4{
                    left: 58.6%;bottom: 45.78%;
                    .inner-txt{
                        bottom: -110px;
                        transform-origin: center top;
                    }
                }
                &.item5{
                    left: 66.47%;top: 33.63%;
                    .inner-txt{
                        top: -110px;
                    }
                }
                &.item6{
                    right: 14.12%;top: 20.98%;
                    .inner-txt{
                        bottom: -110px;
                        transform-origin: center top;
                    }
                }
            }
        }
        .school-song{
            position: relative;
            img{
                height: 100%;width: auto;
            }
            audio{
                position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 80;
            }
            .play-box{
                border: 2px #0c104b solid;padding: 9px;border-radius: 30px;
                position: absolute; bottom: 20%;right: -80px;
                .btn{
                    width: 48px;height: 48px;display: block;
                    background: url(../images/play-btn.png) no-repeat;
                    &.play{
                        background-position: 0 0;
                    }
                    &.pause{
                        background-position: -48px 0;
                    }
                }
            }
        }
    }
    &.opened{
        .reel-cont{
            width:77.5%;
        }
    }
}

@keyframes _flash {
    0% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: .5;
        transform: scale(0.9);
    }
}